<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">合格单录入</view>
		</cu-custom>
		<view :class="['margin-xs radius shadow shadow-lg bg-white' ,BackGroundBox]" v-if="isShow">
			<view style="margin-left: 32rpx;font-size: 36rpx;color: rgb(127, 184, 178);padding-top: 20rpx;">基本信息</view>
			<form @submit="formSubmit" >
				<view class="cu-form-group">
					<view class="title">单号</view>
					<input type="text" disabled placeholder="系统自动生成" />
				</view>
				<view class="cu-form-group">
					<view class="title">日期</view>
					<input type="text" name="LTICKETDATE" disabled :value="LTICKETDATE" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">联系人</view>
					<input type="text" name="LPTNCODE" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">业务员</view>
					<input type="text" name="LSALEOPID" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">总金额</view>
					<input type="text" disabled name="LTOTALAMOUNT" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">总数量</view>
					<input type="text" disabled name="LTOTALWEIGHT" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">已付金额</view>
					<input type="text" disabled name="LPAYAMOUNT" placeholder="手动输入" />
				</view>
				<view class="cu-form-group">
					<view class="title">计量方式</view>
					<picker @change="PickerChange2" name="LUNIT" :value="index2" :range="picker2" range-key="LNAME">
						<view class="picker">
							{{picker2[index2].LNAME}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">币种</view>
					<picker @change="PickerChange3" name="LCURRENCYID" :value="index3" :range="picker3" range-key="LNAME">
						<view class="picker">
							{{index3>-1?picker3[index3].LNAME:'请选择'}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">付款方式</view>
					<picker @change="PickerChange4" name="LCURRENCYID" :value="index4" :range="picker4" range-key="LNAME">
						<view class="picker">
							{{index4>-1?picker4[index4].LNAME:'请选择'}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">提货方式</view>
					<picker @change="PickerChange5" name="LCURRENCYID" :value="index5" :range="picker5" range-key="LNAME">
						<view class="picker">
							{{index5>-1?picker5[index5].LNAME:'请选择'}}
						</view>
					</picker>
				</view>
				<button-father :Position="'tb-fa-fixed'">
					<button class="cu-btn bg-blue-gradual lg shadow tb-flex cu-btn-new">重置</button>
					<button class="cu-btn bg-gradual-blue  lg shadow tb-flex cu-btn-new" form-type="submit">确认</button>
				</button-father>
			</form>
		</view>
		
		<view :class="['bg-cyan solid-bottom margin-xs radius shadow shadow-lg',BackGroundBox]" style="background-color:#FFFFFF" v-if="isShow">
			<view style="margin-left: 32rpx;font-size: 36rpx;color: rgb(127, 184, 178);padding-top: 20rpx;">明细信息</view>
			<!-- <view class="grid text-center col-2" style="height: 100rpx;line-height: 100rpx;color: #888; border-bottom: 4rpx solid #e5e5e5;">
				<view class="">总金额:0</view>
				<view class="">总数量:0</view>
			</view> -->
			<view class="flex solid-bottom padding-sm justify-center" style="align-items: center;">
				<image @tap="jumpadddetail" style="width: 80rpx;height: 80rpx;" src="/static/images/add.png" mode="aspectFit"></image>
				<text class="text-center text-black padding-left-sm">添加信息</text>
			</view>
			<!-- <view class="grid text-center col-1">
				<image @tap="jumpadddetail" style="width: 100%;height: 90rpx;" src="/static/images/add.png"
				 mode="aspectFit"></image>
				 <view class="text-center text-black padding-bottom-xs">添加信息</view>
			</view> -->
		</view>
		<view :class="['margin-xs radius shadow shadow-lg bg-white' ,BackGroundBox]" v-if="isShow" >
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in list" :key="index"
				 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" @tap="jumpdetail(item,index)" :data-target="'move-box-' + index">
					<view class="grid col-1 padding-sm" style="width: 100%;">
						<view class=" flex">
							<view class="text-grey padding-sm flex-sub">名称:{{item.LYLNAME}}</view>
							<view class="text-gray padding-sm text-sm flex-sub">编号:{{item.LYLCODE}}</view>
						</view>
						<view class=" flex">
							<view class="text-grey padding-sm flex-sub">色号:{{item.LLCOLORCODE}}</view>
							<view class="text-gray padding-sm text-sm flex-sub">颜色{{item.LLCOLORNAME}}:</view>
						</view>
					</view>
					<view class="move">
						<view class="bg-red" @tap.stop="Delete(item,index)">删除</view>
					</view>
				</view>
			</view>
		</view>
		<view :class="['margin-xs radius shadow shadow-lg bg-white' ,BackGroundBox]" style="margin-bottom: 100rpx;">
			<view class="cu-form-group">
				<view class="title">是否付款</view>
				<switch @change="SwitchA" name="LISPAY" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
			</view>
			<view class="cu-form-group">
				<view class="title">制单人</view>
				<input type="text" name="LMAC" disabled :value="LMAKEOPID" />
			</view>
			<view class="cu-form-group">
				<view class="title">制单日期</view>
				<input type="text" name="LMAC" disabled :value="LMAKEOPDATE" />
			</view>
			<view class="cu-form-group">
				<view class="title">备注</view>
				<input placeholder="请输入备注" type="text" :adjust-position="false" v-model="LREMARK" @focus="focus" name="LREMARK" />
			</view>
		</view>
		<!--顶部下拉菜单-->
		<zyt-input tui-top-dropdown="tui-top-dropdown" bgcolor="rgba(76, 76, 76, 0.95)" :show="menuShow" :height="0"
		 @close="closeMenu" :zvalue="LREMARK" @zblur="zblur">
		</zyt-input>
		<!---顶部下拉菜单-->
	</view>
</template>

<script>
	import ButtonFather from "@/colorui/components/ButtonFather.vue";
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		getselectReferList
	} from "@/service/selectList"
	export default {
		data() {
			return {
				isShow: false,
				LREQDATE: global.dateright,
				LMAKEOPDATE: global.dateright,
				LTICKETDATE: global.dateright,
				height:this.screenHeight,
				LMAKEOPID: global.userinfo.lusername,
				picker2: [],
				index2: 0,
				picker3: [],
				index3: 0,
				picker4: [],
				index4: 0,
				picker5: [],
				index5: 0,
				switchA:false,
				list: [],
				modalName: null,
				LREMARK:"",
				menuShow:null
			}
		},
		computed: {
			...mapGetters([
				'Style', 'Font', 'Certificateofconformitygetlist','BackGround','BackGroundBox'
			]),
		},
		components: {
			ButtonFather
		},
		onShow() {
			console.log(this.Certificateofconformitygetlist);
			if (this.Certificateofconformitygetlist) {
				this.list = this.Certificateofconformitygetlist
			}
		},
		onUnload() {
			this.dellist([])
		},
		onLoad() {
			//计量方式
			const Ajax = new Promise((resolve, reject) => {
				getselectReferList( 4002, '表头', 'LUNIT',{}).then(res => {
					if (res.code != 0) {
						resolve(res.data)
					}
				})
			})
			//币种
			const Ajax0 = new Promise((resolve, reject) => {
				getselectReferList( 4002, '表头', 'LCURRENCYID',{}).then(res => {
					if (res.code != 0) {
						resolve(res.data)
					}
				})
			})
			// 付款方式
			const Ajax1 = new Promise((resolve, reject) => {
				getselectReferList( 4002, '表头', 'LPAYTYPE',{}).then(res => {
					if (res.code != 0) {
						resolve(res.data)
					}
				})
			})
			// 提货方式
			const Ajax2 = new Promise((resolve, reject) => {
				getselectReferList( 4002, '表头', 'LCARRYTYPE',{}).then(res => {
					if (res.code != 0) {
						resolve(res.data)
					}
				})
			}).catch(error => {
				reject(error)
			})
			Promise.all([Ajax, Ajax0, Ajax1, Ajax2]).then(res => {
				//所有请求都成功后执行函数
				console.log(res);
				this.picker2 = res[0]
				this.picker3 = res[1]
				this.picker4 = res[2]
				this.picker5 = res[3]
				this.isShow = true
			}).catch(error => {
				//// 异常处理
				console.log(error);
			})
		},
		methods: {
			...mapMutations(['Certificateofconformitydellist','dellist']),
			//跳转详情页面
			jumpadddetail() {
				uni.navigateTo({
					url: './Certificateofconformityadddetail/Certificateofconformityadddetail'
				})
			},
			//跳转到修改页面
			jumpdetail(item,index) {
				uni.navigateTo({
					url:`./Certificateofconformityedit?item=${JSON.stringify(item)}&index=${index}`
				})
			},
			PickerChange2(e) {
				this.index2 = e.detail.value
			},
			PickerChange3(e) {
				this.index3 = e.detail.value
			},
			PickerChange4(e) {
				this.index4 = e.detail.value
			},
			PickerChange5(e) {
				this.index5 = e.detail.value
			},
			SwitchA(e) {
			    this.switchA = e.detail.value
			},
			focus(e) {
				this.menuShow = true
				this.LREMARK = e.detail.value
			},
			openMenu() {
				this.menuShow = false
			},
			zblur(value) {
				console.log(value);
				this.LREMARK = value
			},
			closeMenu() {
				this.menuShow = false
			},
			//提交
			formSubmit(e) {
				console.log(e.detail.value);
			},
			//删除
			Delete(item, index) {
				uni.showModal({
					title: '提示',
					content: `确定要删除第${index + 1}条内容吗？`,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.Certificateofconformitydellist(index)
						}
					}
				})
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style>
	page {
		background-color: whitesmoke;
	}
</style>
